<template>
  <div class="execution">
    <basic-container>
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
<!--          <el-row>-->
<!--            <el-col :span="6">-->
              <el-form-item label="接入/接出" prop="commType">
                <el-select v-model="searchForm.commType" @change="getRangeSelect" placeholder="接入/接出">
                  <el-option v-for="item in rangeList" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
<!--            </el-col>-->

<!--            <el-col :span="6">-->
              <el-form-item label="接入项目名称" prop="sysCode" v-if="searchForm.commType === '0'">
                <el-select v-model="searchForm.inSysName" @change="getGroupListBySysCode" placeholder="接入项目名称">
                  <el-option v-for="item in sysList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
<!--            </el-col>-->
<!--            <el-col :span="6">-->
              <el-form-item label="接入服务名称" prop="groupCode" v-if="searchForm.commType === '0'">
                <el-select v-model="searchForm.groupCode" placeholder="接入服务名称">
                  <el-option v-for="item in groupList" :key="item.code" :label="item.name"
                             :value="item.code"></el-option>
                </el-select>
              </el-form-item>
<!--            </el-col>-->
<!--            <el-col :span="6">-->
              <el-form-item label="接出项目名称" prop="thirdSys" v-if="searchForm.commType === '1'">
                <el-select v-model="searchForm.inSysName" @change="setSysName" placeholder="接出项目名称">
                  <el-option v-for="item in thirdSysList" :key="item.code" :label="item.name"
                             :value="item.code"></el-option>
                </el-select>
              </el-form-item>
<!--            </el-col>-->
<!--            <el-col :span="6">-->
              <el-form-item label="交易码" prop="transCode">
                <el-input v-model="searchForm.transCode" placeholder="交易码"></el-input>
              </el-form-item>
<!--            </el-col>-->
<!--            <el-col :span="6">-->
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchChangeSelf">搜 索</el-button>
                <el-button type="default" icon="el-icon-delete" @click="searchReset">清 空</el-button>
              </el-form-item>
<!--            </el-col>-->
<!--          </el-row>-->

        </el-form>
      </div>

      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-reset="searchReset"
      >
        <template slot="menuLeft">
          <el-button v-if="permissionBtn.pre_msg_add" type="primary" icon="el-icon-plus" @click="handleAdd">新增
          </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-if="permissionBtn.pre_msg_edit" type="text" size="small" icon="el-icon-edit"
                     @click="handleEdit(scope.row, scope.index)">查看详情
          </el-button>
          <el-button v-if="permissionBtn.pre_msg_del" type="text" size="small" icon="el-icon-delete"
                     @click="handleDelete(scope.row, scope.index)">删除
          </el-button>
          <el-button v-if="permissionBtn.pre_msg_copy" type="text" size="small" icon="el-icon-document-copy"
                     @click="handleCopy(scope.row, scope.index)">复制
          </el-button>
        </template>
      </avue-crud>

      <!-- 详情 -->
      <Detail :visible.sync="visible" :searchData="searchData" @update="refreshChange"></Detail>

      <!-- 复制 -->
      <el-dialog title="报文配置复制" :visible.sync="dialogVisible" width="50%" @close="dialogClosed">
        <el-form ref="copyForm" :model="copyForm" labelWidth="100px">
          <el-form-item label="项目名称" prop="systemName" required>
            <el-input v-model="copyForm.systemName" disabled></el-input>
          </el-form-item>
          <el-form-item label="服务名称" prop="groupName" required v-if="groupshow && copyForm.groupName">
            <el-input v-model="copyForm.groupName" disabled></el-input>
          </el-form-item>
          <el-input v-model="copyForm.commType" v-if="false"></el-input>
          <el-input v-model="copyForm.systemCode" v-if="false"></el-input>
          <el-input v-model="copyForm.groupCode" v-if="false"></el-input>
          <el-input v-model="copyForm.pktId" v-if="false"></el-input>
          <el-form-item
            v-for="(code, index) in copyForm.transCodes"
            :label="`交易码${index || ''}`"
            :prop="`transCodes.${index}`"
            :key="index"
            :rules="[{ required: true, message: '交易码不能为空' }]"
          >
            <el-input v-model="copyForm.transCodes[index]" :style="{ width: '50%', marginRight: '20px' }"></el-input>
            <el-button type="danger" icon="el-icon-minus" circle v-if="index !== 0"
                       @click="delCode(code, index)"></el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" icon="el-icon-plus" @click="createCode">新建</el-button>
          <el-button type="primary" icon="el-icon-collection" @click="save">保存</el-button>
          <el-button icon="el-icon-delete" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
  import {fetchList, putObj, delObj, copy, checkTransCode} from '@/api/pre/msg'
  import {option} from '@/const/crud/pre/msg'
  import {mapGetters} from 'vuex'
  import Detail from './detail'
  import {getSysList} from '@/api/pre/insystem'
  import {getGroupList, getGroupListBySysCode} from '@/api/pre/group'
  import {getOutSysList} from '@/api/pre/outsystem'
  import {rangeList} from '@/const/crud/pre/msg'

  export default {
    name: 'Msg',
    components: {
      Detail
    },
    data() {
      return {
        option: option,
        rangeList,
        tableList: [],
        tableLoading: false,
        searchForm: {
          rangeSelect: '0',
          commType: '0',
          sysCode: '',
          groupCode: '',
          transCode: '',
          thirdSys: '',
        },
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 20
        },

        visible: false,
        searchData: {
          rangeSelect: '',
          sysCode: '',
          groupCode: '',
          transCode: '',
          thirdSys: '',
        },

        dialogVisible: false,
        copyForm: {},

        groupshow: true,

        sysList: [],
        groupList: [],
        thirdSysList: [],
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      permissionBtn() {
        return {
          pre_msg_edit: this.permissions['pre_msg_edit'],
          pre_msg_add: this.permissions['pre_msg_add'],
          pre_msg_del: this.permissions['pre_msg_del'],
          pre_msg_copy: this.permissions['pre_msg_copy']
        }
      }
    },

    created() {
      this.getSysList()
      this.getOutSysList()
    },

    methods: {
      getRangeSelect(value) {
        this.searchForm.commType = value
        this.searchForm.sysCode = ''
        this.searchForm.groupCode = ''
        this.searchForm.thirdSys = ''
        this.searchForm.inSysName = ''
      },
      getSysList() {
        getSysList().then(res => {
          this.sysList = res.data.data
        })
      },
      getGroupListBySysCode(value) {
        return getGroupListBySysCode(value).then(res => {
          this.searchForm.groupCode = ''
          this.groupList = []
          this.groupList = res.data.data
          if (this.groupList.length && !this.searchForm.groupCode) {
            this.searchForm.group = this.groupList[0].groupCode
          }
          for (var i = 0; i < this.sysList.length; i++) {
            if (this.sysList[i].code == this.searchForm.sysCode) {
              // this.searchForm.sysName = this.sysList[i].name
            }
          }
        })
      },
      setSysName() {
        for (var i = 0; i < this.thirdSysList.length; i++) {
          if (this.thirdSysList[i].code == this.searchForm.thirdSys) {
            // this.searchForm.sysName = this.thirdSysList[i].name
            this.searchForm.groupCode = ""
          }
        }
      },
      getOutSysList() {
        getOutSysList().then(res => {
          this.thirdSysList = res.data.data
        })
      },
      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        ).then(response => {
          this.tableList = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      searchChange(param, done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      searchChangeSelf(){
        this.page.currentPage = 1
        this.getList(this.page, this.searchForm)
      },
      handleAdd() {
        this.visible = true
        this.searchData = {}
      },
      //查看详情
      handleEdit(row, index) {
        this.visible = true
        this.searchData.rangeSelect = (row.commType == 0 ? "0" : "1")
        row.commType == 0 ? this.searchData.sysCode = row.systemCode : this.searchData.thirdSys = row.systemCode
        // if (row.commType == 0){
        //   this.searchData.sysCode = row.systemCode
        // }
        this.searchData.groupCode = row.groupCode
        this.searchData.transCode = row.transCode
        this.searchData.pktId = row.pktId
      },
      searchReset() {
        this.searchForm = {
          rangeSelect: '0',
          commType: '0',
          sysCode: '',
          groupCode: '',
          transCode: '',
          thirdSys: '',
        }
        this.searchForm.commType = '0'
        this.searchForm.rangeSelect = '0'
        this.page.currentPage = 1
        this.getList(this.page)
      },
      //复制
      handleCopy(row, index) {
        this.dialogVisible = true
        this.copyForm = {
          groupName: row.groupName,
          commType: row.commType,
          systemCode: row.systemCode,
          groupCode: row.groupCode,
          pktId: row.pktId,
          transCodes: ['']
        }
        if (row.commType == '0') {
          this.copyForm.systemName = row.inSysName
          this.groupshow = true
        } else if (row.commType == '1') {
          this.copyForm.systemName = row.inSysName
          this.groupshow = false
        }
      },
      //删除
      handleDelete: function (row, index) {
        this.$confirm('是否确认删除' + row.inSysName + '的报文配置？', '提示', {
          type: 'warning'
        })
          .then(() => {
            return delObj(row.pktId)
          })
          .then(res => {
            this.$message.success('删除成功')
            this.refreshChange()
          }).catch(() => {})
      },
      dialogClosed() {
        this.$refs.copyForm.resetFields()
      },
      createCode() {
        this.copyForm.transCodes.push('')
      },
      delCode(code, index) {
        this.copyForm.transCodes.splice(index, 1)
      },
      save() {
        this.$refs.copyForm.validate(valid => {
          if (!valid) {
            return
          }
          checkTransCode(this.copyForm).then(res => {
            if (res.status == 200) {
              copy(this.copyForm).then(copyres => {
                this.$message.success('报文保存成功')
                this.refreshChange()
                this.dialogVisible = false
                this.$refs.copyForm.resetFields()
              })
            }
          })
        })
      }
    }
  }
</script>
